<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // Promise实例的拓展方法
    // then()
    // catch()
    // finally()

    // catch()和finally() 也是基于then方法封装的

    // 返回值: 新的Promise实例  -> 链式操作


    // then() 方法的链式操作
    // (1) 如果then()方法中接收的参数不是函数, Promise实例的状态和存储的数据都会依次向后传递(传递给新的Promise实例)
    // (2) 如果then()方法中接收的参数是函数, 当Promise实例状态改变之后,会执行对应的回调函数,回调函数执行完毕,新的Promise实例也是变为fulfilled(已成功),回调函数的返回值,回作为新的Promise实例的数据存储, 如果回调函数执行过程中出现错误,错误会被捕获, 新的Promise实例也是变为rejected(已失败),错误的信息会作为Promise对象的数据向后传递


    // (3) 如果then()方法回调函数函数的返回值是Promise对象, 新的Promise实例需要等待该Promise实例状态改变之后, 才能跟着改变,数据也会跟着传递 (新的Promise对象的状态和数据 依赖于返回的Promise对象)

    // 小结:
    // then()方法的返回值,如果不是Promise对象,直接向后传
    // then()方法的返回值,如果是Promise对象,等该Promise实例状态改变之后在向后传


    // 情况2:
    // var p = new Promise(function (resolve, reject) {
    //     setTimeout(function () {
    //         resolve(1);
    //     }, 2000)
    // })

    // // then() 方法的链式操作中,如果回调函数函数的返回值是非Promise对象, 该数据回作为新的Promise实例存储的数据继续向后传递
    // p.then(function (arg) {
    //     console.log("fulfilled", arg);
    //     return 2;
    // }).then(function (arg) {
    //     console.log("fulfilled", arg);
    //     return 3;
    // }).then(function (arg) {
    //     console.log("fulfilled", arg);
    //     return 4;
    // }).then(function (arg) {
    //     console.log("fulfilled", arg);
    // }).catch(function (err) {
    //     console.log("rejected", err);
    // })

    // then() 方法的链式操作中,如果回调函数函数的返回值是Promise对象, 新的Promise实例需要等待该Promise实例状态改变之后, 才能跟着改变,数据也会跟着传递

    // 写法1: 第一个异步操作有结果,在启动第二个  (后面的可以依赖前面的)
    // var p = new Promise(function (resolve, reject) {
    //     setTimeout(function () {
    //         resolve(1);
    //     }, 2000)
    // })
    // console.log(p);

    // p.then(function (arg) {
    //     console.log("fulfilled", arg);

    //     var p1 = new Promise(function (resolve, reject) {
    //         setTimeout(function () {
    //             resolve(2);
    //         }, 2000);
    //     })
    //     return p1;
    // }).then(function (arg) {
    //     console.log("fulfilled", arg);

    //     var p2 = new Promise(function (resolve, reject) {
    //         setTimeout(function () {
    //             resolve(3);
    //         }, 2000)
    //     })
    //     return p2;
    // }).then(function (arg) {
    //     console.log("fulfilled", arg);

    //     var p3 = new Promise(function (resolve, reject) {
    //         setTimeout(function () {
    //             resolve(4);
    //         }, 2000)
    //     })
    //     return p3;
    // }).then(function (arg) {
    //     console.log("fulfilled", arg);
    // }).catch(function (err) {
    //     console.log("rejected", err);
    // })



    // 写法2: 同时启动了多个异步操作,(同时计时), 按顺序处理结果 
    var p = new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(1);
        }, 2000)
    })
    console.log(p);

    var p1 = new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(2);
        }, 2000);
    })

    var p2 = new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(3);
        }, 2000)
    })

    var p3 = new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(4);
        }, 2000)
    })


    p.then(function (arg) {
        console.log("fulfilled", arg);
        return p1;
    }).then(function (arg) {
        console.log("fulfilled", arg);
        return p2;
    }).then(function (arg) {
        console.log("fulfilled", arg);
        return p3;
    }).then(function (arg) {
        console.log("fulfilled", arg);
    }).catch(function (err) {
        console.log("rejected", err);
    })

</script>

</html>